<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>生成二维码</title>
	<script type="text/javascript" src="qrcodejs-master/jquery.min.js"></script>
	<script type="text/javascript" src="qrcodejs-master/qrcode.js"></script>
	<style type="text/css">
		.position {
			width: 500px;
			height: 500px;
			position: absolute;
			left: 450px;
			top: 100px;
		}
		.position input {
			width: 200px;
			height: 25px;
			font-size: 14px;
		}
		.position div {
			margin-left: 50px;
		}
	</style>
	<script type="text/javascript">
		var qrcode;
		$(function(){
			qrcode = new QRCode(document.getElementById("qrcode"), {
				width: 180,
				height: 180,
				colorDark : '#000000',
				colorLight : '#ffffff',
				correctLevel : QRCode.CorrectLevel.H
			});
			make();
			$('input').on("blur", function () {
				make();
			}).on("keydown", function (e) {
				if (e.keyCode == 13) {
					make();
				}
			});
		});
		
		function make(){
			if ($("#qrcodeInput").val() == "") {
				$("#qrcodeInput").focus();
				return;
			}
			qrcode.makeCode($("#qrcodeInput").val());
		}
		
	</script>
</head>
<body>
	<div class="position">
		<input type="text" id="qrcodeInput" value="董继强">&emsp;<button onclick="make();">生成二维码</button><br><br>
		<div id="qrcode"></div>
	</div>
</body>
</html>